<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="dist/css/swiper.min.css">
    <link rel="stylesheet" href="dist/css/index.css">
    <script src="dist/js/swiper.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=	ihO07XDLIdlTNRNLW8Wq2PVwCkNWCA1k	"></script>
    
    <script>
        window.onload=function(){
            var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
            
            // // 如果需要滚动条
            // scrollbar: {
            // el: '.swiper-scrollbar',
            // },
        })        

            var map = new BMap.Map("container");
            var point = new BMap.Point(108.95,34.27);
            map.centerAndZoom(point,12);

            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){console.log(r.point)
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);//标出所在地
                    map.panTo(r.point);//地图中心移动
                    //alert('您的位置：'+r.point.lng+','+r.point.lat);
                    var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
                    var gc = new BMap.Geocoder();
                    gc.getLocation(point, function(rs){
                    var addComp = rs.addressComponents; console.log(rs.address);//地址信息
                    console.log(rs.address);//弹出所在地址

                    });
                }else {
                    alert('failed'+this.getStatus());
                }        
            },{enableHighAccuracy: true})
        }
    </script>
</head>
<body>
    <div class="nav">
        <!--顶部nav-->
        <div class="nav-con">
            <div class="nav-content">
                 <p>全国热线400-0000-0000</p>
                 <div class="nav-text">
                     <a href="#">设为首页</a>
                     <a href="#">加入收藏</a>
                 </div>
            </div>     
        </div>
        <!--logo nav-->
        <div class="header">
            <div class="header-img">
                <img src="dist/img/logo.png" alt="">
            </div>
            <div class="header-nav">
                <ul>
                    <li>
                        <a href="produce.html" class="active">
                            <span>首页</span>
                            <span>home</span>
                        </a>
                    </li>
                    <li>
                         <a href="#">
                            <span>关于我们</span>
                            <span>About</span>
                        </a>
                    </li>
                    <li>
                         <a href="#">
                            <span>产品中心</span>
                            <span>Products</span>
                        </a>
                    </li>
                    <li>
                         <a href="#" >
                            <span>服务支持</span>
                            <span>Service</span>
                        </a>
                    </li>
                     <li>
                         <a href="#">
                            <span>新闻中心</span>
                            <span>News</span>
                        </a>
                    </li>
                     <li>
                        <a href="#">
                            <span>在线商店</span>
                            <span>Shop</span>
                        </a>
                    </li>
                     <li>
                        <a href="#">
                            <span>联系我们</span>
                            <span>Contact us</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--轮播图-->
    <div class="more-img">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="dist/img/banner2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="dist/img/banner.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="dist/img/banner3.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器-->
            <div class="swiper-pagination"></div> 
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
             <!--如果需要滚动条 
            <div class="swiper-scrollbar"></div>-->
        </div>
    </div>
    <!--新闻中心 新品发布-->
    <div class="wrap-all">
        <div class="wrap clearfix">
           <div class="wrap-news">
               <div class="wrap-t">
                   <div class="triangle"></div>
                    <p>新闻中心</p>
                    <h3>NEWS.CONCER</h3>
               </div>
               <div class="wrap-m">
                   <h3>CEbit 2015</h3>
                   <div class="wrap-img">
                       <img src="dist/img/news1.png" alt="">
                       <p>
                           创新TIC共创全连世界德国汉诺威中心
                           <br>
                           2015年3月25日
                      </p>
                   </div>
               </div>
               <ul>
                   <li>
                       <p>上海国际智能建筑展览会</p>
                   </li>
                    <li>
                       <p>2014年德国国际消费智能电子产品展览会</p>
                   </li>
                    <li>
                       <p>2014年中国公安消防安全防范产品展览会</p>
                   </li>
               </ul>
           </div>
              <div class="wrap-news">
               <div class="wrap-t second">
                   <div class="triangle"></div>
                    <p>新品发布</p>
                    <h3>NEWS.PRODUCES</h3>
               </div>
               <div class="wrap-m">
                   <h3>CEbit 2015</h3>
                   <div class="wrap-img" id="banner">
                       <img src="dist/img/banner3.jpg" alt="">
                   </div>
               </div>
               <div class="warp-p">
                    <p>s6213w-y</p>
                    <p>海思3518E方案，多码流技术，百万高清</p>
               </div>
                      
           </div>
              <div class="wrap-news">
               <div class="wrap-t third">
                   <div class="triangle"></div>
                    <p>品牌介绍</p>
                    <h3>INFORMATION</h3>
               </div>
               <div class="wrap-m">
                   <h3>CEbit 2015</h3>
                   <div class="wrap-img" id="banner">
                       <img src="dist/img/info1.png" alt="">
                   </div>
               </div>
               <div class="warp-p">
                    <p>s6213w-y</p>
                    <p>海思3518E方案，多码流技术，百万高清</p>
               </div>
           </div>
        </div>

      <!--关于我们-->
     <div class="about">
        <div class="about-us">
            <h3>关于我们</h3>
            <div class="line1"></div>
            <div class="line2"></div>
            <p>ABOUT US</p>
        </div>
        <p >
            广州市TK科技有限公司是领先的监控产品供应商和解决服务商，
            面向全球提供领先的网络安全监控系列产品机器专业的行业解决方案。
            TK公司自创立以来，一直持续加大研发投入和不断致力于技术创新，
            创造安防行业众多高品质，高性能的精品，持续为客户创造最大价值。
        </p>
        <div class="about-img">
            <img src="dist/img/banner4.png" alt="">
        </div>
    </div>
    <!--联系我们-->
    <div class="contact">
        <div class="about-us">
            <h3>联系我们</h3>
            <div class="line1"></div>
            <div class="line2"></div>
            <p>CONTACT US</p>
        </div>
        <div class="contact-con">
            <div class="contact-left">
                <div class="contact-top">
                    <div class="contact-l">
                        <img src="dist/img/erweima.png" alt="">
                        <p>微信扫一扫<br>
                            关注我们公司的信息</p>
                    </div>
                    <div class="contact-r">
                        <p>服务热线：400-0000-0000</p>
                        <p>联系人：李先生</p>
                        <p>公司邮箱：www.tk.com</p>
                        <p>公司传真：000-12345678</p>
                        <p>邮政编码：467000</p>
                        <p>公司地址：广州海珠区东沙街24号</p>
                    </div>
                </div>
                <!--百度地图-->
                <div class="contact-bottom" id="container"> </div>
            </div>
            <div class="contact-right">
                <form action="">
                    <p>昵称</p>
                    <input type="text" id="name" maxlength="10">
                    <p>联系电话</p>
                    <input type="number" id="tel" maxlength="15">
                    <p>电子邮箱</p>
                    <input type="email" id="email">
                    <p>内容</p>
                    <textarea name="" id="" ></textarea>
                    <button class="btn" type="submit">提交</button>
                </form>               
            </div>
        </div>
    </div>
    </div>
    <!--页尾-->
    <div class="footer">
        <div class="footer-con">
             <p>关注我们</p>
            <ul>
                <li><a href="#">公司网站</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">团队风采</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">在线留言</a></li>
            </ul>
        </div>  
    </div>
</body>
</html>